<!doctype html>
<html>
<head>
<meta charset="ut f-8">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<link rel="stylesheet" href="css/font-awesome.min.css">
<title>svg</title>
<style>
    div {
	     display:flex;
		 flex-direction:column;
		 flex-wrap:wrap;
		 margin-left:auto;
		 margin-right:auto;
		 }

    @import url('https://fonts.googleapis.com/css?family=Gochi+Hand');

body {
  background-color: #B0C4DE;
  min-height: 70vh;
  padding: 40vh 30vw;
  color: hsl(198, 1%, 29%);
  font-family: 'Gochi Hand', cursive;
  text-align: center;
  font-size: 130%;  
}

h2 {
  line-height: 1.5;
  display: list-item;
  background-image: linear-gradient(
        transparent 50%,
        #FFFFE0 50%,
        #FFF800 85%,
        transparent 85%,
        transparent 100%
    );
    background-repeat:no-repeat;
    background-size: 0% 100%;
    animation: animatedBackground 3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards;animation-iteration-count: infinite;
}

@keyframes animatedBackground {
    to {
        background-size: 100% 100%;
    }
}
</style>
</head>

<body>
<div>
	<div>
	<!--增加animateMotion动画-->
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="250px"
   height="250px"
   viewBox="-80 -80 400 400"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.3 (2405546, 2018-03-11)"
   sodipodi:docname="star.svg">
  <defs
     id="defs2" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="400"
     inkscape:cy="560"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1366"
     inkscape:window-height="706"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       sodipodi:type="star"
       style="fill:#ff6600;stroke-width:0.26458332"
       id="path52"
       sodipodi:sides="5"
       sodipodi:cx="99.029755"
       sodipodi:cy="144.29762"
       sodipodi:r1="69.568161"
       sodipodi:r2="34.784081"
       sodipodi:arg1="-0.33205947"
       sodipodi:arg2="0.29625906"
       inkscape:flatsided="false"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="m 164.79761,121.61905 -32.49913,32.83359 8.62327,45.38587 -41.269386,-20.76238 -40.499795,22.22622 6.993256,-45.66544 -33.653517,-31.64931 45.591451,-7.46042 19.700778,-41.786573 21.183813,41.054653 z"
       inkscape:transform-center-x="0.38479464"
       inkscape:transform-center-y="-6.2761452">
	   <animateTransform
                      attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 120 120"
                      to="360 120 120"
                      dur="2"
                      repeatCount="indefinite" />
	</path>
  </g>
</svg>
	</div>
    <div style="width:250px;height:250px;">
    <!--fontawesome-修改图标大小、颜色及增加旋转动画-->
	<i class="fa fa-spin fa-2x fa fa-bath" style="font-size:250px; color:lightblue;"></i>
    </div>
</div>
<!--codepen-修改样式颜色、内容、动画时长及将动画设为无限重复-->
<h2>i don't know</h2>
<h2>don't ask me</h2>
</body>
</html>